<template>
	<view class="topText_1" @tap="data1.isEdit = false,data1.show = true,data1.str = '',data1.id = ''">
		<image src="/static/img/index/122.png" mode="widthFix"></image>
		新增分类
	</view>
	<view class="classificationManagement">
		<view v-if="!data1.bool" class="topText">拖动调整分类排序</view>
		<leo-drag v-if="!data1.bool"  ref="myDrop" @getList="getDropList" v-model:list="data1.dragAndDrop">
			<template #content={data}>
				<view class="drop listItem"
					:style="[{'transform':data.index === data.activeIndex?'scale(1.05)':'scale(1)',}]">
					<view class="left" @touchstart="touchstart(data.index)">
						<image class="leftIco" src="/static/img/index/70.png" mode="widthFix"></image>
						{{data.categoryName}}
					</view>
					<view class="right">
						<text
							@click.stop="data1.isEdit = true,data1.show = true,data1.id = data.id,data1.str = data.categoryName">编辑</text>
						<text @click.stop="handeDelete(data)">删除</text>
					</view>
				</view>
			</template>
		</leo-drag>
		<view v-if="data1.bool" >
			<view class="drop listItem"
			@tap="handeClick(item)"
			v-for="(item,index) in data1.dragAndDrop" :key="index"
				>
				<view class="left">
					<image class="leftIco" src="/static/img/index/70.png" mode="widthFix"></image>
					{{item.categoryName}}
				</view>
			</view>
		</view>
		
		<u-popup round="10" mode="center" :show="data1.show" @close="()=>{data1.show = false}">
			<view class="mode">
				<text class="title">{{data1.isEdit?'编辑':'新增'}}分类</text>
				<u-input :focus="true" :maxlength="10" v-model="data1.str" class="input"
					placeholder="请输入分类名称">
					<template #suffix>
						<text>{{data1.str.length}}/10</text>
					</template>
				</u-input>
				<view class="bot">
					<text @tap="data1.show = false">取消</text>
					<text @tap="submit">保存</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import { insertOrUpdateCategory, listCategory, deleteCategory } from '@/utils/api/goods'
	import {
		reactive,
		ref
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	const myDrop = ref()

	const data1 = reactive<any>({
		show: false,
		isEdit: false,
		str: '',
		dragAndDrop: [ // 列表数据

		],
		index: 0
	})
	onLoad(({isBool})=>{
		if(isBool){
			data1.bool = true;
		}
	})
	const handeClick=(item)=>{
		uni.navigateBack();
		uni.$emit('addCategory',{
			categoryList:data1.dragAndDrop,
			id:item.id
		})
	}
	const handeDelete = (item : any) => {
		uni.showModal({
			content: '是否删除该分类?',
			title: '提示',
			success: (e : any) => {
				if (e.confirm) {
					deleteCategory({ data: { id: item.id } }).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '删除成功!',
								icon: 'none'
							})
							uni.$emit('commodityManagement',0)
							requstList()
						}
					})
				}
			}
		})
	}
	const getDropList = (list : any) => {
		// 拖拽完毕后获取到的数据 
		if (data1.dragAndDrop[data1.index].id == data1.startId) {
			return;
		}
		data1.dragAndDrop = list;
		const index = list.map(item => item.id).indexOf(data1.startId);
		console.log({ id: data1.startId, categoryName: list[index].categoryName, sortNum: index })
		insertOrUpdateCategory({ data: { id: data1.startId, categoryName: list[index].categoryName, sortNum: index } })
		uni.$emit('commodityManagement',0)
		// console.log(list)
	}
	const submit = () => {
		if (!data1.str) {
			uni.showToast({
				title: '请输入标题',
				icon: 'none'
			})
			return;
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		console.log({ id: data1.id, categoryName: data1.str })
		insertOrUpdateCategory({ data: { id: data1.id, categoryName: data1.str } }).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: data1.id ? '编辑成功!' : '添加成功!',
					icon: 'none'
				})
				requstList()
				uni.$emit('commodityManagement',0)
				data1.show = false;
			}
		})
	}
	const touchstart = (i : number) => {
		data1.index = i;
		data1.startId = data1.dragAndDrop[i].id;
		// 默认是长按才能拖动，可根据需求，通过触摸拖动元素
		myDrop.value.handleLongpress(i);
	}
	const requstList = () => {
		listCategory().then((res) => {
			data1.dragAndDrop = res.data;
			myDrop.value.init(res.data)
		})
	}
	requstList()
	// const changeList = () => {
	// 	// 如果新增或者删除了数据，请调用此函数
	// 	let list = data1.dragAndDrop;
	// 	myDrop.value.initList(list, true);
	// }
</script>

<style lang="scss">
	.topText_1 {
		padding: 30rpx 32rpx;
		background: #fff;

		image {
			width: 42rpx;
			margin-right: 24rpx;
		}

		color: #6B64D3;
		font-size: 32rpx;
		display: flex;
		align-items: center;
	}

	.classificationManagement {
		height: 100vh;
		background-color: #F4F6FA;
		padding: 24rpx;

		.topText {
			color: #8C8C8C;
		}
	}

	.mode {
		width: 700rpx;
		padding: 64rpx 0 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			font-size: 36rpx;
			color: #262626;
		}

		.input {
			width: 100%;
			border-radius: 12rpx;
			background: #F4F6FA;
			font-size: 24rpx;
			margin: 28rpx 0 64rpx 0;
			width: 80%;

			input {
				height: 64rpx;
			}
		}

		.bot {
			width: 100%;
			display: flex;
			border-top: 1rpx solid #D8D8D8;

			text {
				text-align: center;
				line-height: 106rpx;
				font-size: 36rpx;
				width: 50%;
			}

			text:nth-of-type(1) {
				border-right: 1rpx solid #D8D8D8;
				color: #8C8C8C;
			}

			text:nth-of-type(2) {
				color: #6B64D3;
			}
		}
	}

	.listItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		border-radius: 24rpx;
		padding: 32rpx 24rpx;
		margin-top: 20rpx;
		height: 120rpx;
		.left {
			display: flex;
			align-items: center;
			flex: 1;

			image {
				width: 36rpx;
				margin-right: 16rpx;
				font-size: 32rpx;
				color: #262626;
			}
		}

		.right {
			display: flex;

			text {
				width: 120rpx;
				line-height: 58rpx;
				text-align: center;
				border-radius: 8rpx;
			}

			text:nth-of-type(1) {
				background: #E4E2FC;
				color: #6B64D3;
			}

			text:nth-of-type(2) {
				background: #FFDED3;
				color: #FF263F;
				margin-left: 16rpx;
			}
		}

	}
</style>